<!--以后项目的根组件-->
<template>
  <div>
    <!--1.0 template主要是放html元素的(html的页面结构)-->
    <span v-text="msg" class="red"></span>

   <button @click="add1(1,2)">add</button>


    <router-link to="/login">登录</router-link>
     <router-link to="/register">注册</router-link>
    <!-- 路由占位符 -->
    <router-view></router-view>  

    <!-- 使用mint-ui中的button组件 -->
    <!-- <mt-button type="danger" size="large">danger</mt-button> -->
    <mt-button @click="tip" type="danger" size="large">danger</mt-button>
    <!-- 使用mui中的9宫格样式 -->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">Home</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-email">
              <span class="mui-badge">5</span>
            </span>
            <div class="mui-media-body">Email</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">Chat</div>
          </a>
        </li>
      </ul> 
    </div>
    <!-- mui的图文表格 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="http://www.dcloud.io/hellomui/images/shuijiao.jpg">
            <div class="mui-media-body">
              幸福
              <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="http://www.dcloud.io/hellomui/images/muwu.jpg">
            <div class="mui-media-body">
              木屋
              <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
            <div class="mui-media-body">
              CBD
              <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
          </a>
        </li>
      </ul>
  </div>
  

</template>

<script>
  // 负责导出 .vue 这个组件对象(本质上是一个vue 对象,所以vue中该定义的元素都可以使用)
  /*new Vue({
    data:
  })
  Vue.component('ddd',{
    template:'#id'
  })*/
  //按需导入
  import {add} from './calc.js';

  import {Toast} from 'mint-ui';
  //import calc from './calc.js';

  //function add(x,y){console.log(x+y)};

  //moudle.exports = {  //es5的导出对象的写法
  export default{  //es6导出对象的写法
    data(){ //等价于es5的 data:function(){}
      return {
        msg:'hello vuejs'
      }
    },
    methods:{
      //add,
      add1:add,
      tip:function(){
        Toast('你好');
      }
      
      //add1:calc.add, //es6的写法 等价于es5 : add :add
      //substrict:calc.substrict
    },
    created(){

    }
  }

</script>

<style scoped>
  
/*当前页面的css样式写到这里,scoped表示这个里面写的css代码只在当前组件页面上有效,不会去影响其他组件的页面*/
.red{
  color:red;
}


</style>